<template>
    <a-menu theme="dark" mode="inline" :default-selected-keys="['1']" @click="onMenuItemClick">
        <a-menu-item v-for="(item,idx) in menuData" :key="idx">
            <span>{{item.name}}</span>
        </a-menu-item>
    </a-menu>
</template>

<script>
    const originMenuData = [{name: '页面滚动时导航智能定位', path: '/scroll-nav-position'}];
    // 存放key与菜单的映射
    const keyMenuInfoMap = new Map();
    originMenuData.map((item, idx) => {
        keyMenuInfoMap.set(idx, item)
    })
    export default {
        name: "SystemMenu",
        data: () => {
            return {
                menuData: originMenuData
            }
        },
        methods: {
            onMenuItemClick: function ({item, key, keyPath}) {
                const menuInfo = keyMenuInfoMap.get(key);
                if (menuInfo) {
                    this.$router.push(menuInfo.path)
                }
            }
        }
    }
</script>

<style scoped>

</style>
